<template>
	<view class="uni_box home">
		<navbar title='确认订单' :yin="true">
		</navbar>
		<view class="content">
			<text class="sname">商品信息</text>
			<view class="goulist">
				<image :src="info.image" class="gouimg" mode=""></image>
				<view class="gright">
					<view class="rone">
						<text class="gname">{{info.title}}</text>
						<text class="gprice">¥{{info.price}}</text>
					</view>
					<view class="jieview">
						<view class="nums">x1</view>
					</view>
				</view>
			</view>
			<view class="beizhu" v-if="info.des">
				<text>备注：{{ info.des }}</text>
			</view>
			<text class="sname">费用明细</text>
			<view class="xinxi">
				<view class="xinone" v-for="(item,index) in price" :key="index">                                  
					<text class="jiatit">{{ item.title }}</text>	
					<text class="jiatit jianum">¥{{item.price}}</text>
				</view>
				<view class="xinone" @click="getyouhui">                                  
					<text class="jiatit">选择优惠券</text>	
					<view class="xuanquan jianum">
						<text class="jiatit">{{ coupon.price?'¥'+coupon.price:'选择优惠券' }}</text>
						<image class="vfan" src="@/pages_subject/static/img/xfan.png" mode="" />
					</view>
					
				</view>
				<!-- <view class="yfu">
					<text class="yfutit">应付款： ¥196.00 </text>
				</view> -->
			</view>
			
			<view class="gouobot">
				<view class="bright">
					<text class="quan">共计金额：  <text class="jine">¥{{total}}</text> </text>
					<!-- <view class="heji">
						<text class="hename">合计：<text class="henums">¥196.00</text></text>
						<text class="henums">共减3元</text>
					</view> -->
					<view class="jie" @click="getzhi">提交订单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:{},
				price:[],
				total:0,
				coupon:{
					id:''
				}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getinit()
		},
		onShow() {
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			console.log(curPage)
			// if(curPage.$vm.balData !=''){
			// 	console.log(curPage.$vm.balData) 
			// }
		},
		methods: {
			// 获取下一页面返回时 传递过来的参数
			setData(data){
				console.log(data)  //接收  
				if(data.receivedParams){
					this.coupon = data.receivedParams.data
					this.gettotal()
				}
			},
			gettotal(){
				this.total = Number(this.total)-Number(this.coupon.price)
			},

			async getinit(){
				let res = await this.$u.api.getGoodsInfo({
					id:this.id
				});
				this.info = res.box
				this.price = res.price
				let data = res.price
				let total = 0
				for(let i in data){
					total+=Number(data[i].price)
				}
				this.total = total
				// console.log(total)
			},
			getzhi(){
				// createOrder
				// let res = await this.$u.api.createOrder({
				// 	id:this.id,
				// 	coupon_id:this.coupon.id|''
				// });
				// console.log(res)
				console.log()
				this.navrouter("/pages_subject/twoPage/MinePage/Pay?id="+this.id+'&coupon_id='+this.coupon.id||'');
			},
			getyouhui(){
				this.navrouter("/pages_subject/twoPage/MinePage/Coupon?id="+this.id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 120rpx;
		.sname{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin: 50rpx 30rpx 30rpx;
			display: block;
		}
		.gview{
			// display: inline-block;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20rpx;
			height: 20rpx;
			margin-right: 20rpx;
			border: 1px solid #BFBFBF;
			.gous{
				display: none;
				width: 12rpx;
				height: 9rpx;

			}
		}
		.gactive{
			background: #E8433A;
			border: 1px solid #E8433A;
			.gous{
				display: inline-block;
				position: relative;

			}
		}
		.goulist{
			display: flex;
			flex-direction: row;
			border-bottom: 1rpx solid #eee;
			padding: 24rpx 30rpx;
			align-items: center;
			
			.gouimg{
				width: 208rpx;
				height: 135rpx;
				border-radius: 5rpx;
				margin-right: 20rpx;
			}
			.gright{
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 100%;
				.rone{
					display: flex;
					flex-direction: column;
					.gname{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						display: block;
						margin-bottom: 20rpx;
					}
					.gprice{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #E8433A;
					}
					.gquan{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FF7D29;
						display: block;
						margin-top: 8rpx;
					}

				}
				.jieview{
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;
				
					.jia{
						width: 30rpx;
						height: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #AAAAAA;
						line-height: 25px;
						border: 1px solid #BFBFBF;
						padding-bottom: 3rpx;
					}
					.nums{
						display: inline-block;
						margin: 0 14rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #AAAAAA;
					}
				}
			}
		}
		.beizhu{
			padding: 9rpx 23rpx;
			background: #F5F5F5;
			margin: 30rpx;
			text{
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}
		}
		.xinxi{
			padding: 0 30rpx;
			.xinone{
				display: flex;
				flex-direction: row;
				margin-top: 20rpx;
				align-items: center;
				.jiatit{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #AAAAAA;
				}
				.jianum{
					margin-left: auto;
				}
				.xuanquan{
					display: flex;
					flex-direction: row;
					align-items: center;

				}
				.vfan{
					width: 8rpx;
					height: 15rpx;
					margin-left: 10rpx;
				}
			}
		}
		.yfu{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			margin-top: 30rpx;
			.yfutit{
				display: flex;
				padding: 9rpx 23rpx;
				background: #F5F5F5;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}
		}

		.gouobot{
			position: fixed;
			width: 100%;
			height: 100rpx;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 30rpx;
			border-top:1rpx solid #eee;
			background: #FFFFFF;
			z-index: 100;
			.quan{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
			}
			.jine{
				color: #E8433A;
				font-size: 25rpx;
			}
			.bright{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				align-items: center;

			}
			.heji{
				display: flex;
				flex-direction: column;
				margin: 0 20rpx;
				.hename{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
				.henums{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FA504E;
				}
			}
			.jie{
				margin-left: 45rpx;
				width: 122rpx;
				height: 45rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
